<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>

		<style type="text/css">
			* {
				/*取消手机点击选择文本的css*/
				-moz-user-select: -moz-none;
				-moz-user-select: none;
				-o-user-select: none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
				-webkit-touch-callout：none;
				/*取消手机点击屏幕时，会出现的灰块*/
				-webkit-text-size-adjust: 100%;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}
			
			body {
				font-family: "Helvetica", "Microsoft Yahei";
				padding: 0;
				margin: 0;
			}
			
			/*.grid {
				background-image: -webkit-linear-gradient(top, transparent 49px, #bfbebe 50px), -webkit-linear-gradient(left, transparent 49px, #bfbebe 50px);
				background-size: 50px 50px;
				background-repeat: repeat;
			}*/
			
			/*.description {
				text-align: center;
			}*/
			
			.hammer {
				width: 200px;
				height: 100px;
				background-color: grey;
				margin: 0 auto;
				text-align: center;
				line-height: 100px;
			}
			
			.indicator-container {
				position: relative;
				width: 100%;
				height: 300px;
				border: 1px solid black;
				box-sizing: border-box;
			}
			
			.indicator {
				position: absolute;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #4CAF50;
				color: white;
				text-align: center;
				z-index: 2;
			}
			
			.trap {
				position: absolute;
				top: 50%;
				left: 50%;
				/*margin-left: -50px;
				margin-top: -50px;*/
				width: 100px;
				height: 100px;
				background-color: grey;
			}
		
		</style>
	</head>

	<body>
		<div class="indicator-container">
			<div class="indicator">
				slider
			</div>

			<div class="trap">

			</div>
		</div>
		<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hammer.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function panTarget(dom, target, container, callback) {
				this.dom = dom;
				this.target = target;
				this.container = container;
				this.pos_x = $(dom).position().left;
				this.pos_y = $(dom).position().top;
				this.pos_Width = $(dom).width();
				this.pos_Height = $(dom).height();
				this.targetLeft = $(target).position().left;
				this.targetTop = $(target).position().top;
				this.targetWidth = $(target).width();
				this.targetHeight = $(target).height();
				this.containerWidth = $(container).width();
				this.containerHeight = $(container).height();
				this.containerLeft = $(container).position().left;
				this.containerTop = $(container).position().top;
				if(typeof callback !== "function") {
					throw "请传入函数"
				} else {
					this.callback = callback;
				}
			}
			panTarget.prototype.judge = function() {
				if(this.pos_x>=this.targetLeft && this.pos_x<=this.targetLeft+this.targetWidth && this.pos_y>=this.targetTop && this.pos_y<=this.targetHeight+this.targetTop){
					this.callback("拖入进去了");
				}else{
					this.callback("不在其中");
				}
			}
			
			panTarget.prototype.panjudge = function(x,y){
				if(x<0){
					x=0;
				}
				if(y<0){
					y=0;
				}
				if(x>this.containerWidth-this.pos_Width){
					x=this.containerWidth-this.pos_Width;
				} 
				if(y>this.containerHeight-this.pos_Height){
					y=this.containerHeight-this.pos_Height;
				} 
				$(this.dom).css({
					"left": x,
					"top": y
				});
			}
			panTarget.prototype.init = function() {
				var _ = this;
				var hammer = new Hammer($(this.dom).get(0));
				hammer.get('pan').set({
					direction: Hammer.DIRECTION_ALL
				});
				hammer.on("pan", function(e) {
					_.panjudge(_.pos_x+e.deltaX,_.pos_y + e.deltaY);
				});
				hammer.on("panend", function() {
					_.pos_x = $(_.dom).position().left;
					_.pos_y = $(_.dom).position().top;
					_.judge();
				});
			}
			var game = new panTarget(".indicator", ".trap", ".indicator-container", function(data) {
				console.log(data);
			});
			game.init();
		</script>
	</body>

</html>